<template>
  <div class="view-edit-content">
    <el-button
      type="primary"
      style="width: 84px; margin-bottom: 12px"
      plain
      :icon="EditPen"
      @click="handleEditMenu(0)"
      v-if="!isEdit"
      >编 辑</el-button
    >
    <avue-form :option="options" v-model="form" @submit="handleSubmit">
      <template #menu-form="{}">
        <el-button v-if="isEdit" @click="handleEditMenu(1)" :icon="ArrowLeftBold">返 回</el-button>
      </template>
    </avue-form>
  </div>
</template>
<script setup>
import { getDetail, add, update } from '@/api/casemanagement/caseManagement';
import { EditPen, ArrowLeftBold } from '@element-plus/icons-vue';
import option from '@/option/casemanagement/caseManagement';
import { findObject } from '@smallwei/avue';
import { ref, reactive, computed, onMounted, nextTick } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useRoute } from 'vue-router';
import { useStore } from 'vuex';
const store = useStore();
const route = useRoute();
const routerQuery = ref({});
routerQuery.value = route.query;
const options = ref(option);
let form = ref({});
let isEdit = ref(false);
// 操作栏按钮点击
const handleEditMenu = type => {
  console.log(type);
  isEdit.value = type === 0 ? true : false;
  options.value.detail = type === 0 ? false : true;
  options.value.submitBtn = type === 0 ? true : false;
  options.value.emptyBtn = type === 0 ? true : false;
};
const initCaseManagementDetail = async id => {
  let res = await getDetail(id);
  setTimeout(() => {
    form.value = res.data.data;
  })
};

// 表单提交按钮
const handleSubmit = (form, done) => {
  add(form)
    .then(() => {
      ElMessage.success('操作成功!');
      initCaseManagementDetail(routerQuery.value.caseManagementId);
      isEdit.value = false;
      options.value.detail = true;
      options.value.submitBtn = false;
      options.value.emptyBtn = false;
      done();
    })
    .catch(error => {
      done();
      window.console.log(error);
    });
};

onMounted(() => {
  options.value.detail = true;
  options.value.submitBtn = false;
  options.value.emptyBtn = false;
  if (routerQuery.value.caseManagementId) {
    initCaseManagementDetail(routerQuery.value.caseManagementId);
  }
});
</script>
<style scoped>
.view-edit-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
</style>